This is a bad story (:
[[Start]]
<div id="preload">
<img src="https://vertpush.neocities.org/VN/Character/chet1.png">
<img src="https://vertpush.neocities.org/VN/Character/chet2.png">
<img src="https://vertpush.neocities.org/VN/Character/chet3.png">
<img src="https://vertpush.neocities.org/VN/Character/chet4.png">
<img src="https://vertpush.neocities.org/VN/Character/hate1.png">
<img src="https://vertpush.neocities.org/VN/Character/hate2.png">
<img src="https://vertpush.neocities.org/VN/Character/hate3.png">
<img src="https://vertpush.neocities.org/VN/Character/hate4.png">
<img src="https://vertpush.neocities.org/VN/Character/hate5.png">
</div>
<div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate1.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet1.png" id="ch_right">
<div class="textContainer"><div class="centered1">(display: "Typewriter")</div></div>
(set: ?passage to"<div class='textBubble'><div class='next'></div></div>")
(click: ?passage)[(goto: "Scene 3a")]|passage>[]
(set: $typewriterText to "One day, stuff was happening.")
</div>
<div class="topBackground" style="background-image: url('https://vertpush.neocities.org/img/scrollingsky.png')"></div>
<div class='container'>
<div class='topBackground'></div>
</div>
<div class="centered">
{(set: ?question1 to "
<div class='question'>Do we want choices?</div>")
(click: ?question1)[(goto: "Scene 4")]
|question1>[]}
{(set: ?question2 to "
<div class='question'>Or maybe we don't care about choices?</div>")
(click: ?question2)[(goto: "Scene 5")]
|question2>[]}
</div><div class='container'>
<div class='topBackground'></div>
Howdy doody scene 4
</div>
<script>
$('.topBackground').css('background','yellow');
</script><div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate1.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet4.png" id="ch_right">
<div class="textContainer"><div class="centered1">(display: "Typewriter")</div></div>
(set: ?passage to"<div class='textBubble'><div class='next'></div></div>")
(click: ?passage)[(goto: "Scene 5a")]|passage>[]
(set: $typewriterText to "Chet: Yeah but we're having fun with it so far!")
</div>{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}<div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate2.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet1.png" id="ch_right">
<div class="textContainer"><div class="centered1">(display: "Typewriter")</div></div>
(set: ?passage to"<div class='textBubble'><div class='next'></div></div>")
(click: ?passage)[(goto: "Scene 4a")]|passage>[]
(set: $typewriterText to "Hate: Man, some things about Twine sure are finnicky.")
</div>
:: StoryTitle
Typewriter Effect in Harlowe
:: Start
<!-- Set the text to show -->
(set: $typewriterText to "Hello, world!")
:: Typewriter
{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}<div class='container'>
<img src="https://vertpush.neocities.org/VN/Character/hate5.png" id="ch_left">
<img src="https://vertpush.neocities.org/VN/Character/chet3.png" id="ch_right">
<div class="textContainer"><div class="centered1">(display: "Typewriter")</div></div>
(set: ?passage to"<div class='textBubble'><div class='next'></div></div>")
(click: ?passage)[(goto: "Scene 5a")]|passage>[]
(set: $typewriterText to "Hate: If //this// is your idea of fun, you need some serious life re-evaluating.")
</div>{
<!-- Create a variable to track the position within the $typewriterText string -->
(set: $typewriterPos to 1)
<!-- Create a hook to hold the typed text -->
|typewriterOutput>[]
<!-- Set a delay of 20ms seconds per loop -->
(live: 20ms)[
<!-- Add the next character to the hook -->
(append: ?typewriterOutput)[(print: $typewriterText's $typewriterPos)]
<!-- Update the position -->
(set: $typewriterPos to it + 1)
<!-- If it's gone past the end, stop -->
(if: $typewriterPos is $typewriterText's length + 1)[
(stop:)
]
]
}{<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
tw-story {
padding: 0;
background-image: url("https://vertpush.neocities.org/bg/seamless-2037739_960_720.jpg");
margin: auto;
max-width: 1000px;
min-width: 0vw;
margin: auto;
padding: 0;
border-left:5px dashed black;
border-right:5px dashed black;
-webkit-filter: drop-shadow(0 0 5px black);
filter: drop-shadow(0 0 5px black);}
body {
font-family: Arial;
background: #f1f1f1;
margin: 0;
padding: 0;
background-image: url("https://vertpush.neocities.org/img/pawbg.png");
background-size: 70%;
background-attachment:fixed;
}
#container {
}
/* Header/Blog Title */
.header {
width: 100%;
}
.header h1 {
font-size: 50px;
}
/* Style the top navigation bar */
.topnav {
width:100%;
text-align: center;
background-color: transparent;
margin-top:-10px;
}
.inner
{
display: inline-block;
}
/* Style the topnav links */
.topnav a {
float:center;
text-align: center;
text-decoration: none;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
width: 75%;
margin-top:-15px;
}
/* Right column */
.rightcolumn {
float: left;
width: 25%;
background-color: transparent;
padding-left: 20px;
margin-top:-15px;
}
/* Fake image */
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
/* Add a card effect for articles */
.card {
background-color: white;
padding: 20px;
border-radius: 25px;
border: 2px solid #73AD21;
margin-bottom:10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Footer */
.footer {
padding: 20px;
text-align: center;
background: #ddd;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
tw-story { width:100%;}
}
#link {width: 100%;
transition: .2s;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */}
#link:hover {
scale: 1.5;
-webkit-filter: drop-shadow(5px 5px 5px #666666);
filter: drop-shadow(5px 5px 5px #666666);
transform: translate(-2px, -2px);
transition: .2s;
}
.tabcontent {
transition: 2s;
}
.tabcontent.on {
-webkit-animation: fadein 0.6s 1 linear alternate;
-moz-animation: fadein 0.6s 1 linear alternate;
-ms-animation: fadein 0.6s 1 linear alternate;
-o-animation: fadein 0.6s 1 linear alternate;
animation: fadein 0.6s 1 linear alternate;
}
@keyframes fadein {
0% { opacity: 0%; transform: translate(-7px);
}
30% { opacity: 0%; transform: translate(-7px);
}
100% { opacity: 100%; transform: translate(0px);
}
}
.trigger {
transition: 2s;}
button {width: 230px; transition: 1s;padding: 0;
border: none;
background: none;z-index:2;}
</style>
</head>
<body>
<div id="container">
<div class="header">
<img src="https://vertpush.neocities.org/VN/Banner1.png" style="width:100%;">
</div>
<div class="topnav">
<div class="inner"><button class="tablinks trigger" onclick="openTab(event, 'About')" id="defaultOpen"><img src="https://vertpush.neocities.org/VN/Buttons/about.png" id="link"></button></div>
(set: ?passage to"<div class='inner'><button><img src='https://vertpush.neocities.org/VN/Buttons/read.png' id='link'></button></div>")(click: ?passage)[(goto: "Start")]|passage>[]
<div class="inner"><button class="tablinks active trigger" onclick="openTab(event, 'Profile')" id="defaultOpen"><img src="https://vertpush.neocities.org/VN/Buttons/charas%20.png" id="link"></button></div>
<div class="inner"><button class="tablinks active trigger" onclick="openTab(event, 'Profile')" id="defaultOpen"><img src="https://vertpush.neocities.org/VN/Buttons/world%20.png" id="link"></button></div>
<div id="About" class="tabcontent" style="display: none;">
<div class="row">
<div class="leftcolumn">
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<a href="https://twitter.com/intent/tweet?screen_name=ohmiyoni&ref_src=twsrc%5Etfw" class="twitter-mention-button" data-show-count="false">Tweet to @ohmiyoni</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div class="rightcolumn">
<div class="card">
<h2>About Me</h2>
<div class="fakeimg" style="height:100px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
</div>
<div class="card">
<h3>Popular Post</h3>
<a class="twitter-timeline" href="https://twitter.com/ohmiyoni?ref_src=twsrc%5Etfw">Tweets by ohmiyoni</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="card">
<h3>Follow Me</h3>
<p>Some text..</p>
</div>
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$('.trigger').click(function () {
$('.tabcontent').addClass('on');
$('.tabcontent').one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(event) {
$('.tabcontent').removeClass('on')
});
});
</script>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
</script>
</body>
</html>}